<template>
    <view class="wrap">
        <view class="item">
            <view class="title" :style="{backgroundColor:colors}">
                <text>{{details.bookname}}</text>
            </view>
            <view class="desc">
                {{details.zname ? details.zname : '发布于'+$u.timeFormat(details.createTime, 'yyyy年mm月dd日 hh:MM')}}
            </view>
            <view class="content">
                <!-- <rich-text :nodes="details.content"></rich-text> -->
                <text user-select decode>{{details.content}}</text>
            </view>
        </view>
    </view>
</template>

<script>
    import * as cloudApi from '@/utils/cloudApi.js'
    export default {
        data() {
            return {
                details: {},
                colors: '',
                userInfo: {},
            }
        },
        onReady() {
            uni.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: this.colors
            })
        },
        onLoad(opt) {
            this.userInfo = uni.getStorageSync("userInfo") || getApp().globalData.userInfo
            this.colors = this.userInfo.themeColors || '#F3C301'
            cloudApi.call({
                name: 'book',
                data: {
                    api: 'getBookRankListDetail',
                    _id: opt._id
                },
                success: res => {
                    console.log(res);
                    this.details = res.result.data[0]
                }
            })
        },
        methods: {

        }
    }
</script>

<style lang="scss">
    .wrap {
        margin: 20rpx;

        .item {
            background-color: #ffffff;
            border-radius: 20rpx;
            margin-bottom: 30rpx;

            .title {
                text-align: center;
                height: 70rpx;
                line-height: 70rpx;
                padding: 0 30rpx;
                color: #ffffff;
                border-radius: 20rpx 20rpx 0 0;
            }

            .desc {
                background-color: #fef8fa;
                padding: 10rpx;
                text-align: center;
                color: #ccc;
                margin: 20rpx 30rpx 0;
            }

            .content {
                font-size: 24rpx;
                padding: 30rpx 20rpx;
            }

        }
    }
</style>
